$(function () {

  var json = [
    // 第一个
    {
      // 第一层
      "name": "中科慈航",
      // 第二层子元素
      "child": [
        // 第二层第一个
        {
          "name": "广州中科慈航",
          "child": [
            // 第三层第一个
            {
              "name": "广州中科慈航天河区分行",
              // 第四层
              "child": [{
                "name": "第四级",
                "child": [{
                  "name": "广州中科慈航天河区分行",
                  // 第四层
                  "child": [{
                    "name": "第五级",
                    "child": [{
                      "name": "广州中科慈航天河区分行",
                      // 第四层
                      "child": [{
                        "name": "第六级",
                        "child": [],
                      }]
                    }],
                  }]
                }],
              }]
            }
          ]
        },
        // 第二层第二个
        {
          "name": "北京中科慈航",
          "child": [{
            "name": "北京中科慈航中城区分行",
            "child": []
          }]
        }
      ]
    },

    //第二个
    {
      "name": "中科科技",
      "child": [{
        "name": "广州中科科技",
        "child": [{
          "name": "广州天河中科科技",
          "child": []
        }]
      }]
    },
    {
      "name": "中科科技",
      "child": [{
        "name": "广州中科科技",
        "child": [{
          "name": "广州天河中科科技",
          "child": []
        }]
      }]
    },
    {
      "name": "中科科技",
      "child": [{
        "name": "广州中科科技",
        "child": [{
          "name": "广州天河中科科技",
          "child": []
        }]
      }]
    },
    {
      "name": "中科科技",
      "child": [{
        "name": "广州中科科技",
        "child": [{
          "name": "广州天河中科科技",
          "child": []
        }]
      }]
    }

  ];

  //递归获得数据嵌套

  var str = "";
  var forTree = function (o) {
    for (var i = 0; i < o.length; i++) {
      // 
      var treestr = "";
      if (typeof o[i]["name"] == "undefined") {
        str = "<div><span>" + o[i].name + "</span><ul>";
      } else {
        treestr = "<div><span>" + o[i].name + "</span><ul>";
      }
      str += treestr;
      if (o[i].child != null) {
        forTree(o[i].child);
      }
      str += "</ul></div>";
    }
    return str;
  }
  var treehtml = forTree(json);
  // console.log(str);

  $("#tree").html(treehtml);

  var menuTree = function () {
    //给有子对象的元素加 加减号

    $("#tree ul").each(function (index, el) {
      // console.log(index, element);
      $(this).hide();
      var ultext = $(el).html();
      var spantext = $(el).siblings("span").html();

      if (ultext) {

        $(el).siblings("span")
          .html("<i class='iconfont icon-fangkuaijiahao'></i>" + spantext + "<i class='iconfont icon-yuanxingjiahao'></i> <i class='iconfont icon-yuanxingjianhao'></i>")
      }
    });
    $("#tree").find("div span").click(function (e) {

      e.stopPropagation();
      var ul = $(this).siblings("ul");
      var spanStr = $(this).text();
      // console.log(spanStr)
      // var spanContent = "";
      // console.log(spanContent)

      if (ul.find("div").html() != null) {
        if (ul.css("display") == "none") {
          ul.show(300);
          // 在这里！！
          // <i class="iconfont iconfangkuaijiahao"> 广州中科慈航</i>
          $(this).html("<i class='iconfont icon-jianhao'></i>" + spanStr + "<i class='iconfont icon-yuanxingjiahao'></i> <i class='iconfont icon-yuanxingjianhao'></i>");

        } else {
          ul.hide(300);
          $(this).html("<i class='iconfont icon-fangkuaijiahao'></i>" + spanStr + "<i class='iconfont icon-yuanxingjiahao'></i> <i class='iconfont icon-yuanxingjianhao'></i>");
        }
      }


      // 加号点击
      $(this).children('i').eq(1).click(function () {
        e.stopPropagation();
        $(".tan").css("display", "block");
        $(".add").css("display", "block");
        $(".del").css("display", "none");
        //点击  清空class
        $("#tree div").removeClass("add_class");
        //添加要修改的class
        $(this).parent().parent().addClass("add_class");

      })


      // 减号点击
      $(this).children('i').eq(2).click(function () {
        e.stopPropagation();
        $(".tan").css("display", "block");
        $(".del").css("display", "block");
        $(".add").css("display", "none");
        //点击 清空class
        $("#tree div").removeClass("del_class");
        //点谁谁中奖
        $(this).parent().parent().addClass("del_class");

      })

    })
  }();




  // 添加目录
  // $(".add input").change(function () {
  //   var addval = $(this).val();
  //   console.log(addval);
  //   return addval
  // })

  $(".add button").click(function () {


    if ($(this).text() == "取消") {
      $(".tan").css("display", "none");
      addval == '';
    }

    if ($(this).text() == "确定") {

      $(".tan").css("display", "none");

      var addval = $(".add input").val();

      if (addval == '') {
        alert("分类不能为空");
      }
      // 传给后台  addval
      // 可以动态添加数据  但是没有功能   需要请求新数据 
      var addhtml = "<div>  <span><i class='iconfont icon-fangkuaijiahao'></i>" + addval + "<i class='iconfont icon-yuanxingjiahao'></i> <i class='iconfont icon-yuanxingjianhao'></i> </span> <ul></ul></div> ";

      $(".add_class").children("ul:first").append(addhtml);

      // 重新加载js 
      // $.getScript("./js/tree.js", function (script, textStatus, jqXHR) {

      // });

    }
  })

  //删除目录
  $(".del button").click(function () {

    if ($(this).text() == "取消") {
      $(".tan").css("display", "none");
    }

    if ($(this).text() == "确定") {

      $(".tan").css("display", "none");
      $(".del_class").css("display", "none");
      // 删除的目录文本
      var del_val = $(".del_class>span").text();

      console.log(del_val);

    }
    // 传递修改的数据 删除的数据 并修改下次请求过来的数据

  })



  function fn(el) {
    var a = $($(el).parent().parent().children('span')[0]).is('.tree-bg')
    // console.log(a)
    if (a) {
      for (let i = 3; i < el.length + 3; i++) {
        if (i % 2 == 0) {
          $($($(el)[i - 3]).children('span')[0]).addClass('tree-bg')
        }
      }
    } else {
      for (let i = 2; i < el.length + 2; i++) {
        if (i % 2 == 0) {
          $($($(el)[i - 2]).children('span')[0]).addClass('tree-bg')
        }
      }
    }

    $(el).each(function (index, data) {
      if ($(data).children('ul').children().length != 0) {
        fn($(data).children('ul').children('div'))
      }
    })
  }
  fn($("#tree").children('div'))
});






//点击减号事件

/*

1.弹出框  获得当前点击的分类名称  点击确定的时候  
2.当前点击的元素css属性为none   后端进行更新  删除当前元素

*/